<html>
<head>
    <title>WebSocket Chat</title>
    <script type='text/javascript'>

      if (!window.WebSocket) {
          alert("WebSocket not supported by this browser");
      }

      function $() { return document.getElementById(arguments[0]); }

      var room = {
        join: function(name) {
          this._username=name;
          var location = "ws://localhost:1989/counter/";
          this._ws=new WebSocket(location);
          this._ws.onmessage=this._onmessage;
          this._ws.onclose=this._onclose;
        },

        _onmessage: function(m) {
          if (m.data){
            var chat=$('chat');
            var spanText = document.createElement('span');
            spanText.className='text';
            spanText.innerHTML=m.data;
            var lineBreak = document.createElement('br');
            chat.appendChild(spanText);
            chat.appendChild(lineBreak);
            chat.scrollTop = chat.scrollHeight - chat.clientHeight;   
          }
        },

        _onclose: function(m) {
          this._ws=null;
        }

      };

    </script>
    <style type='text/css'>
        div { border: 0px solid black; }
        div#chat { clear: both; width: 40em; height: 20ex; overflow: auto; background-color: #f0f0f0; padding: 4px; border: 1px solid black; }
    </style>
</head>
<body>
    <div id='chat'></div>
    <script type='text/javascript'>
        room.join("Testbot");
    </script>
</body>
</html>
